<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/login.css">
	<script src="js/gVerify.js"></script>
	<script src="js/code.js"></script>
</head>
<body>
<div class="top">
	<div>
		<img src="image/图片1.png">
	</div>
	<div class="text">
		<h1>疫情防控登录</h1>
		<h6 style="text-align: right">您好,请您先登录平台</h6>
	</div>
</div>
<div class="info">
	<div class="login_wel">
		<h4>欢迎登录</h4>
	</div>
	<div class="btn1" id="btn">
		<button type="button" class="btn btn-primary" id="login_by_phone1">手机号登录</button>
		<button type="button" class="btn btn-success" id="login_by_name1">用户名登录</button>
	</div>
</div>
<div class="login">
	<hr>
	<div class="img">
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="image/1.jpg" alt="First slide" style="height: 300px;width: 600px">
					<div class="carousel-caption">标题 1</div>
				</div>
				<div class="item">
					<img src="image/2.jpg" alt="Second slide" style="height: 300px;width: 600px">
					<div class="carousel-caption">标题 2</div>
				</div>
				<div class="item">
					<img src="image/3.jpg" alt="Third slide" style="height: 300px;width: 600px">
					<div class="carousel-caption">标题 3</div>
				</div>
				<div class="item">
					<img src="image/4.jpg" alt="Four slide" style="height: 300px;width: 600px">
					<div class="carousel-caption">标题 4</div>
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
	<div class="from" id="login_by_name">
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="firstname" placeholder="请输入用户名">
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="lastname" placeholder="请输入密码">
				</div>
			</div>
			<div class="form-group">
				<label for="code_input" class="col-sm-2 control-label">验证码</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="code_input" placeholder="验证码">
					<div id="v_container" class="code" style="width: 100px;margin-top: 20px"></div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox">
							<div style="margin-left: -5px;">
								请记住我
							</div>
						</label>
					</div>
				</div>
			</div>
			<div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10" style="position: relative;left:50%;margin:auto;">
					<button type="button" class="btn btn-default" id="my_button">登录</button>
				</div>
			</div>

		</form>
	</div>
	<div class="from" id="login_by_phone" style="display:none">
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">手机号 </label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入用户名">
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入密码">
				</div>
			</div>
			<div class="form-group">
				<div>
					<label for="code1" class="col-sm-2 control-label">验证码</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" placeholder="请输入验证码" id="code1">
					</div>
				</div>
			</div>
			<div class="form-group" style="display: block">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox" style="margin-top: -2px">
							<div style="margin-left: -5px;margin-top: -5px">
								请记住我
							</div>
						</label>
					</div>
				</div>
			</div>
			<div>
			</div>
			<div id="check-code">
				<span class="code1" id="data_code"></span>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10" style="position: relative;left:50%;margin:auto;">
					<button type="button" class="btn btn-default" id="my_button1">登录</button>
				</div>
			</div>

		</form>
	</div>
</div>
</body>
<script>
    var verifyCode = new GVerify("v_container");
    document.getElementById("my_button").onclick = function () {
        var res = verifyCode.validate(document.getElementById("code_input").value);
        if (res) {
            alert("验证正确");

        } else {
            alert("验证码错误");
        }
    }
    document.getElementById("my_button1").onclick = function () {
        var result = sessionStorage.getItem("code");
        var code1 = document.getElementById("code1").value;
        if (code1 !== result) {
            alert("验证码错误");
        } else {
            alert("验证码正确")
        }
    }
</script>
<script>
    /**
     * 验证码
     * codeLength:验证码长度
     */
    $('#check-code').code_Obj({
        codeLength: 6
    });
</script>
<script>
    $("#login_by_phone1").click(function () {
        $("#login_by_name").attr("style", "display:none;");//显示div
        $("#login_by_phone").attr("style", "display:block;");//显示div
        $("#data_code").attr("style", "display:block;");//显示div
    });
    $("#login_by_name1").click(function () {
        $("#login_by_name").attr("style", "display:block;");//显示div
        $("#login_by_phone").attr("style", "display:none;");//显示div
    });
</script>

</html>
